<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table {
            border: dotted 1px red;
            border-collapse: collapse;
            width: 100%;
            height: 100px;
            text-align: center;
            padding: 20px;
            color: royalblue;
            background-color: orange;
        }

        th {
            background-color: palegoldenrod;
        }

        td,
        th {
            border: dotted 1px red;
            padding: 10px;
        }
    </style>

</head>

<body>

    <!-- <table border width="100%"> -->
    <table>
        <caption>课程表</caption>
        <!-- 表格在头部 -->
        <thead>
            <!-- 列 th（table header）: 头列  -->
            <!-- tr>th*5 -->
            <tr>
                <th></th>
                <th>1~2</th>
                <th>3~4</th>
                <th>5~6</th>
                <th>7~8</th>
            </tr>
        </thead>
        <!-- 表格在主体 -->
        <tbody>
            <!-- 行row  -->
            <!-- 列column td（table data）: 数据列   -->
            <!-- tr>td*5 -->
            <!-- 合并列：colspan 列数 -->
            <!-- 行并列：rowspan 列数 -->
            <tr>
                <th>星期一</th>
                <td>Java</td>
                <td>English</td>
                <td colspan="2">Bootstrap</td>
            </tr>
            <tr>
                <th>星期二</th>
                <td rowspan="2">Java</td>
                <td>English</td>
                <td>Bootstrap</td>
                <td>HTML5</td>
            </tr>
            <tr>
                <th>星期三</th>
                <td>English</td>
                <td>Bootstrap</td>
                <td>HTML5</td>
            </tr>
        </tbody>
        <!-- 表格在底部 -->
        <tfoot>
            <tr>
                <td colspan="5">课时总数：2*4*5 = 40</td>
            </tr>
        </tfoot>
    </table>

</body>

</html>

<!-- emmet tab -->